/**
 * Created by GSY on 16/9/23.
 */
(function () {

  var contentOptions; //内部用选项
  var delay; //删除节点等待时长
	/**
   * 初始化content
   * @param options 选项
   * animateType 动画类型 pushIn/slideIn/fadeIn 默认fadeIn
   * animateDuration 动画时常 单位秒 默认0.15s
   * contentBgOpacity 背景透明度 默认0.7
   * contentBgcolor 背景颜色 默认#fff
   * template 内容模版 默认空
   * templateUrl 内容模版URL 默认空 覆盖template
   * @constructor
   */
  window.DefineContent = function (options) {

    this.animateType = options.animateType || 'fadeIn';
    this.animateDuration = options.animateDuration || '.15s';
    this.contentBgOpacity = options.contentBgOpacity || '.7';
    this.contentBgcolor = options.contentBgcolor || '#fff';
    this.template = options.template || undefined;
    this.templateUrl = options.templateUrl || undefined;
    contentOptions = options;
    delay = parseFloat(contentOptions.animateDuration) * 1000;

  };

  var contentBg; //背景
  var content;   //内容容器
	/**
   * 将content页面移入当前页面,根据animateType来执行content移入页面的动画
   * @param parentElement 父节点
   * @returns {*[]} [0]content节点   contentBg节点
   */
  DefineContent.prototype.addInto = function (parentElement) {

    //创建背景
    contentBg = document.createElement('div');
    contentBg.setAttribute('id', 'define-push-content-bg');
    contentBg.setAttribute('class', 'define-push-content-bg');
    contentBg.style.transitionDuration = this.animateDuration;

    //创建内容容器
    content = document.createElement('div');
    content.setAttribute('id', 'define-push-content');
    content.setAttribute('class', 'define-push-content');
    content.style.transitionDuration = this.animateDuration;

    //插入内容模版
    if (this.templateUrl) {

      //引用的模版
      var xhr = new XMLHttpRequest();
      xhr.open('GET', this.templateUrl, true);
      xhr.setRequestHeader("Content-type","text/html");

      xhr.onload = function() {
        if (this.status == 200 || this.status == 0) {

          var text = xhr.responseText;
          content.innerHTML = text;

        } else {
          content.innerHTML = '<div style="color:white; position: absolute; top: 50%; width: 100%; text-align: center;">模版获取失败,请检查</div>';
        }
      };
      xhr.send();

    } else if (this.template) {

      //模版
      content.innerHTML = this.template;

    }

    switch (this.animateType) {
      case 'pushIn':
        pushIn(parentElement);
        break;
      case 'slideIn':
        slideIn(parentElement);
        break;
      case 'fadeIn':
        fadeIn(parentElement);
        break;
      default:
        fadeIn(parentElement);
    }

    return [content,contentBg];

  };

	/**
   * 移出页面
   * @param e 触发的event option
   */
  DefineContent.prototype.deleteSelf = function () {

    switch (this.animateType) {
      case 'pushIn':
        pushOut();
        break;
      case 'slideIn':
        slideOut();
        break;
      case 'fadeIn':
        fadeOut();
        break;
      default:
        fadeOut();
    }

  };

	/**
   * 内部方法  显示和隐藏content的动画
   * @param parentElement 父节点
   */
  function pushIn(parentElement) {
    contentBg.style.marginTop = '100vh';
    content.style.marginTop = '100vh';
    parentElement.appendChild(contentBg);
    parentElement.appendChild(content);
    setTimeout(function () {
      contentBg.style.marginTop = '0';
      content.style.marginTop = '0';
    }, 20);
  }
  function pushOut() {
      contentBg.style.marginTop = '100vh';
      content.style.marginTop = '100vh';
      setTimeout(function () {
        contentBg.parentNode.removeChild(contentBg);
        content.parentNode.removeChild(content);
      }, delay);
  }

  function slideIn(parentElement) {
    contentBg.style.marginLeft = '100vw';
    content.style.marginLeft = '100vw';
    parentElement.appendChild(contentBg);
    parentElement.appendChild(content);
    setTimeout(function () {
      contentBg.style.marginLeft = '0';
      content.style.marginLeft = '0';
    }, 20);
  }
  function slideOut() {
    contentBg.style.marginLeft = '100vw';
    content.style.marginLeft = '100vw';
    setTimeout(function () {
      contentBg.parentNode.removeChild(contentBg);
      content.parentNode.removeChild(content);
    }, delay);
  }

  function fadeIn(parentElement) {
    contentBg.style.opacity = '0';
    content.style.opacity = '0';
    parentElement.appendChild(contentBg);
    parentElement.appendChild(content);
    setTimeout(function () {
      contentBg.style.opacity = contentOptions.contentBgOpacity;
      contentBg.style.backgroundColor = contentOptions.contentBgColor;
      content.style.opacity = '1';
    }, 20);
  }
  function fadeOut() {
    contentBg.style.opacity = '0';
    content.style.opacity = '0';
    setTimeout(function () {
      contentBg.parentNode.removeChild(contentBg);
      content.parentNode.removeChild(content);
    }, delay);
  }

})();
